/*
   游戏规则：
     白字先行；
     白字为甲，黑子为乙


   */

Chess = {
    data: {
        ele_chess: document.getElementById('chess'),
        arrPoint: [],
        ct: null,
        myColor: 'black',
        role: -1  // me：自己(黑子,先进房间)，other：对方， 下一步的角色  -1：等待对方进入
    },
    methods: {
        initUI() {
            var ct = Chess.data.ele_chess.getContext('2d');
            ct.strokeStyle = '#BFBFBF';
            Chess.data.ct = ct;
            Chess.methods.drawChessBorder(ct);
            // init data
            for (var i = 0; i < 15; i++) {
                Chess.data.arrPoint[i] = [];
                for (var j = 0; j < 15; j++) ;
                {
                    Chess.data.arrPoint[i][j] = 0;
                }
            }
            Chess.data.ele_chess.onclick = Chess.methods.nextStep;
        },
        // 下了(i,j)后是否结束
        isFinish(i, j) {  //m 的值为1或者2，代表黑或者白
            var u = j + 1;
            var d = j - 1;
            var sum = 0;
            var f = true;
            //上下方向
            while (1) {
                if (u >= 0 && Chess.data.arrPoint[i][j] == Chess.data.arrPoint[i][u]) {
                    sum++;
                    u++;
                    f = false;
                }
                if (d >= 0 && Chess.data.arrPoint[i][j] == Chess.data.arrPoint[i][d]) {
                    sum++;
                    d--;
                    f = false;
                }
                if (f) {
                    break;
                }
                f = true;

            }
            if (sum == 4) {
                return true;
            }
            //左右方向
            var u = i + 1;
            var d = i - 1;
            var sum = 0;
            var f = true;

            while (1) {
                if (u >= 0 && Chess.data.arrPoint[i][j] == Chess.data.arrPoint[u][j]) {
                    sum++;
                    u++;
                    f = false;
                }
                if (d >= 0 && Chess.data.arrPoint[i][j] == Chess.data.arrPoint[d][j]) {
                    sum++;
                    d--;
                    f = false;
                }
                if (f) {
                    break;
                }
                f = true;

            }
            if (sum == 4) {
                return true;
            }
            //左上-->右下
            var ux = i - 1;
            var uy = j + 1;
            var dx = i + 1;
            var dy = j - 1;
            var sum = 0;
            var f = true;
            while (1) {
                if (ux >= 0 && uy >= 0 && Chess.data.arrPoint[i][j] == Chess.data.arrPoint[ux][uy]) {
                    sum++;
                    ux--;
                    uy++;
                    f = false;
                }
                if (dx >= 0 && dy >= 0 && Chess.data.arrPoint[i][j] == Chess.data.arrPoint[dx][dy]) {
                    sum++;
                    dx++;
                    dy--;
                    f = false;
                }
                if (f) {
                    break;
                }
                f = true;
            }
            if (sum == 4) {
                return true;
            }
            //左下-->右上
            var ux = i + 1;
            var uy = j + 1;
            var dx = i - 1;
            var dy = j - 1;
            var sum = 0;
            var f = true;
            while (1) {
                if (ux >= 0 && uy >= 0 && Chess.data.arrPoint[i][j] == Chess.data.arrPoint[ux][uy]) {
                    sum++;
                    ux++;
                    uy++;
                    f = false;
                }
                if (dx >= 0 && dy >= 0 && Chess.data.arrPoint[i][j] == Chess.data.arrPoint[dx][dy]) {
                    sum++;
                    dx--;
                    dy--;
                    f = false;
                }
                if (f) {
                    break;
                }
                f = true;
            }
            if (sum == 4) {
                return true;
            }
            return false;
        },
        drawChessBorder(ct) {
            for (var i = 0; i < 15; i++) {
                ct.moveTo(15 + 30 * i, 15);
                ct.lineTo(15 + 30 * i, 435);
                ct.stroke();
                //
                ct.moveTo(15, 15 + 30 * i);
                ct.lineTo(435, 15 + 30 * i);
                ct.stroke();
            }
        },
        // 落子，绘制UI并判断逻辑
        nextStep(e) {  // 下棋，e为触发点击事件的元素，判断逻辑
            if (Chess.data.role == -1) {
                return;
            }
            console.log('落子', Chess.data.role)
            var x1 = e.offsetX;
            var y1 = e.offsetY;
            i = Math.floor(x1 / 30);
            j = Math.floor(y1 / 30);

            // 判断是否棋子是否落在棋盘里
            if (Chess.methods.oneStep(i, j)) {
                if (Chess.methods.isFinish(i, j)) {
                    if (Chess.data.role == "me") {
                        Chess.methods.sendStep(i,j, '你输了');
                        window.setTimeout(function () {
                            alert('恭喜，你赢了！！');
                            // 退出房间
                            $('#rooms').load('${ctx}/outRoom')
                        }, 100);
                    } else {
                        Chess.methods.sendStep(i,j, '你赢了');
                        window.setTimeout(function () {
                            alert('你输了！！');
                            $('#rooms').load('${ctx}/outRoom')
                        }, 100);
                    }
                }
                // 角色互换
                if (Chess.data.role == "me") {
                    Chess.data.role = "other";
                } else {
                    Chess.data.role = "me";
                }
                // 通知对方
                Chess.methods.sendStep(i,j, -1);

            }
        },
        // 落子，绘制UI，返回值：是否落在棋盘中
        oneStep(i, j) {

            var x = 15 + 30 * i;
            var y = 15 + 30 * j;
            if (Chess.data.arrPoint[i][j]) {
                return false;
            }
            if (Chess.data.role == "me") {//下黑子数组标记为1
                console.log("我的颜色："+Chess.data.myColor)
                if (Chess.data.myColor == 'black') {
                    var gradient = Chess.data.ct.createRadialGradient(x, y, 13, x, y, 0);
                    gradient.addColorStop(0, '#000');
                    gradient.addColorStop(1, '#CCC');
                    Chess.data.ct.fillStyle = gradient;
                    Chess.data.ct.beginPath();
                    Chess.data.ct.arc(x, y, 13, 0, Math.PI * 2, true);
                    Chess.data.ct.closePath();
                    Chess.data.ct.fill();
                    Chess.data.arrPoint[i][j] = 1;
                } else {
                    Chess.data.ct.fillStyle = '#CCC';
                    Chess.data.ct.beginPath();
                    Chess.data.ct.arc(x, y, 13, 0, Math.PI * 2, true);
                    Chess.data.ct.closePath();
                    Chess.data.ct.fill();
                    Chess.data.arrPoint[i][j] = 2;
                }
            } else {
                return false;
            }
            return true;
        },
        sendStep(i, j, rs) {
            socket.send('step,' + i + ',' + j+','+rs);
        },
        stepAnother(i,j){  // 下对面的棋
            var x = 15 + 30 * i;
            var y = 15 + 30 * j;
            if (Chess.data.myColor == 'white') {
                var gradient = Chess.data.ct.createRadialGradient(x, y, 13, x, y, 0);
                gradient.addColorStop(0, '#000');
                gradient.addColorStop(1, '#CCC');
                Chess.data.ct.fillStyle = gradient;
                Chess.data.ct.beginPath();
                Chess.data.ct.arc(x, y, 13, 0, Math.PI * 2, true);
                Chess.data.ct.closePath();
                Chess.data.ct.fill();
                Chess.data.arrPoint[i][j] = 1;
            } else {
                Chess.data.ct.fillStyle = '#CCC';
                Chess.data.ct.beginPath();
                Chess.data.ct.arc(x, y, 13, 0, Math.PI * 2, true);
                Chess.data.ct.closePath();
                Chess.data.ct.fill();
                Chess.data.arrPoint[i][j] = 2;
            }
            Chess.data.role = "me";
        }
    }

};
Chess.methods.initUI();


// var chess = document.getElementById('chess');
// var fresh = document.getElementById('fresh');
// var ct = chess.getContext('2d');
// ct.strokeStyle = '#BFBFBF';
//
//
// var me = false;
// //定义二维数组
// var arr = [];
// for (var i = 0; i < 15; i++) {
//     arr[i] = [];
//     for (var j = 0; j < 15; j++) ;
//     {
//         arr[i][j] = 0;
//     }
// }
// // 初始化界面
// function initUI() {
// //	fresh.onclick=
//     fresh.onclick = function () {
//         window.location.reload();
//     }
//
//     drawChessBorder();
// }
// window.onload = initUI;
//
// //加载点击事件，逻辑
// chess.onclick = function (e) {
//     var x1 = e.offsetX;
//     var y1 = e.offsetY;
//     i = Math.floor(x1 / 30);
//     j = Math.floor(y1 / 30);
//
//
//     if (oneStep(i, j)) {
//         if (isFinish(i, j)) {
//             if (me) {
//                 window.setTimeout(function () {
//                     alert('恭喜，白子赢了！！');
//                 }, 100);
//             } else {
//                 window.setTimeout(function () {
//                     alert('恭喜，黑子赢了！！');
//                 }, 100);
//             }
//         }
//     }
//
// }

// function clearChess() {
//
// }
//
// //画棋子
// function isFinish(i, j, m)//m 的值为1或者2，代表黑或者白
// {
//     var u = j + 1;
//     var d = j - 1;
//     var sum = 0;
//     var f = true;
//     //上下方向
//
//     while (1) {
//         if (u >= 0 && arr[i][j] == arr[i][u]) {
//             sum++;
//             u++;
//             f = false;
//         }
//         if (d >= 0 && arr[i][j] == arr[i][d]) {
//             sum++;
//             d--;
//             f = false;
//         }
//         if (f) {
//             break;
//         }
//         f = true;
//
//     }
//     if (sum == 4) {
//         return true;
//     }
//     //左右方向
//     var u = i + 1;
//     var d = i - 1;
//     var sum = 0;
//     var f = true;
//
//     while (1) {
//         if (u >= 0 && arr[i][j] == arr[u][j]) {
//             sum++;
//             u++;
//             f = false;
//         }
//         if (d >= 0 && arr[i][j] == arr[d][j]) {
//             sum++;
//             d--;
//             f = false;
//         }
//         if (f) {
//             break;
//         }
//         f = true;
//
//     }
//     if (sum == 4) {
//         return true;
//     }
//     //左上-->右下
//     var ux = i - 1;
//     var uy = j + 1;
//     var dx = i + 1;
//     var dy = j - 1;
//     var sum = 0;
//     var f = true;
//     while (1) {
//         if (ux >= 0 && uy >= 0 && arr[i][j] == arr[ux][uy]) {
//             sum++;
//             ux--;
//             uy++;
//             f = false;
//         }
//         if (dx >= 0 && dy >= 0 && arr[i][j] == arr[dx][dy]) {
//             sum++;
//             dx++;
//             dy--;
//             f = false;
//         }
//         if (f) {
//             break;
//         }
//         f = true;
//     }
//     if (sum == 4) {
//         return true;
//     }
//     //左下-->右上
//     var ux = i + 1;
//     var uy = j + 1;
//     var dx = i - 1;
//     var dy = j - 1;
//     var sum = 0;
//     var f = true;
//     while (1) {
//         if (ux >= 0 && uy >= 0 && arr[i][j] == arr[ux][uy]) {
//             sum++;
//             ux++;
//             uy++;
//             f = false;
//         }
//         if (dx >= 0 && dy >= 0 && arr[i][j] == arr[dx][dy]) {
//             sum++;
//             dx--;
//             dy--;
//             f = false;
//         }
//         if (f) {
//             break;
//         }
//         f = true;
//     }
//     if (sum == 4) {
//         return true;
//     }
//     return false;
// }
//
// // 落子
// function oneStep(i, j) {
//
//     var x = 15 + 30 * i;
//     var y = 15 + 30 * j;
//     if (arr[i][j]) {
//         return false;
//     }
//     if (me) {//下黑子数组标记为1
//         me = !me;//下完黑子之后，me=fasle;
//         var gradient = ct.createRadialGradient(x, y, 13, x, y, 0);
//         gradient.addColorStop(0, '#000');
//         gradient.addColorStop(1, '#CCC');
//         ct.fillStyle = gradient;
//         ct.beginPath();
//         ct.arc(x, y, 13, 0, Math.PI * 2, true);
//         ct.closePath();
//         ct.fill();
//         arr[i][j] = 1;
//     } else   //下白字  2
//     {
//         me = !me;
//         ct.fillStyle = '#CCC';
//         ct.beginPath();
//         ct.arc(x, y, 13, 0, Math.PI * 2, true);
//         ct.closePath();
//         ct.fill();
//         arr[i][j] = 2;
//     }
//     return true;
// }

// // 棋盘边框
// function drawChessBorder() {
//     for (var i = 0; i < 15; i++) {
//         ct.moveTo(15 + 30 * i, 15);
//         ct.lineTo(15 + 30 * i, 435);
//         ct.stroke();
//         //
//         ct.moveTo(15, 15 + 30 * i);
//         ct.lineTo(435, 15 + 30 * i);
//         ct.stroke();
//     }
// }